<template>
    <div class="wrap container">
       
        <div class="box">
            <div class="box1" v-for="item in list">
        <div class="left">{{item.name}}:</div>
        <div class="right">
            <span class="txt ellipsis" v-for="i in item.properties">{{ i.name }}</span>
        </div>
       </div>
       </div>
    </div>
</template>

<script>
    export default {
        props:{
            list:{
            type:Array,
            default:()=>[]
        }
    }
    }
</script>

<style lang="scss" scoped>
.wrap{
    background-color: #fff;
    margin: 10px 0 20px 0;
    .box{
        box-sizing: border-box;
        padding:20px ;
        .box1{
        display: flex;
        margin-bottom: 20px;
        .left{
            width: 100px;
            text-align: left;
            line-height: 30px;
        }
        .right{
            display: flex;
            flex: 1;
            flex-wrap: wrap;
            margin-left: 50px;
            .txt{
                width: 120px;
                font-size: 12px;
                line-height: 30px;
                margin-right: 20px;
                text-align: center;
            }
        }
     }
    }
}
</style>